import React, { useRef, useEffect } from 'react';
// import { Button } from 'antd';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { mockMessageList } from '@/services/api';

interface GithubIssueItem {
  url: string;
  repository_url: string;
  labels_url: string;
  comments_url: string;
  events_url: string;
  html_url: string;
  id: number;
  node_id: string;
  number: number;
  title: string;
  // user: User;
  labels: Label[];
  state: string;
  locked: boolean;
  assignee?: any;
  assignees: any[];
  milestone?: any;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: any;
  author_association: string;
  body: string;
}

interface Label {
  id: number;
  node_id: string;
  url: string;
  name: string;
  color: string;
  default: boolean;
  description: string;
}

const columns: ProColumns<GithubIssueItem>[] = [
  {
    title: '序号',
    width: 100,
    dataIndex: 'index',
    valueType: 'index',
  },
  {
    title: '姓名',
    dataIndex: 'text',
    copyable: true,
  },
  {
    title: '电话',
    dataIndex: 'text',
    copyable: true,
  },
  {
    title: '登录名',
    dataIndex: 'text',
    copyable: true,
  },
  {
    title: '角色信息',
    dataIndex: 'text',
    copyable: true,
  },
  {
    title: 'option',
    valueType: 'option',
    width: 200,
    dataIndex: 'id',
    render: () => [<a>编辑</a>, <a>设置角色</a>, <a>删除</a>],
  },
];

const List = (props: any) => {
  const actionRef = useRef<ActionType>();
  useEffect(() => {
    // console.log(props);
  }, []);
  return (
    <ProTable<GithubIssueItem>
      columns={columns}
      actionRef={actionRef}
      request={async (params = {}) => {
        const { data } = await mockMessageList(params);
        const { records, total } = data;

        const newData = JSON.parse(JSON.stringify(records));

        // const totalObj = await request(
        //     'https://api.github.com/repos/ant-design/ant-design-pro/issues?per_page=1',
        //     {
        //         params,
        //     },
        // );
        return {
          data: newData,
          page: params.current,
          success: true,
          total,
        };
      }}
      rowKey="date"
      pagination={{
        showSizeChanger: true,
      }}
      dateFormatter="string"
      headerTitle="历史消息"
      // params={{ state: 'all' }}
      //     toolBarRender={() => [
      //         <Button key="3" type="primary" onClick={() => setVisible(true)}>
      //             <Icon type="plus" />
      //             新建
      //   </Button>,
      //     ]}
    />
  );
};

export default List;
